---
title: Bar Chart Widget
description: Learn how to use the Bar Chart Widget in OpenLIT to compare grouped data using ClickHouse queries and dynamic filters.
---

The **Bar Chart Widget** in OpenLIT is great for comparing categorical or grouped data—like errors by type, usage by region, or revenue by plan. You can customize the chart direction, stack behavior, and bind dynamic filters directly into your ClickHouse queries.

---

## 📌 Use Cases

- Comparing usage across different platforms or regions  
- Visualizing grouped data like plan types, error categories, or product segments  
- Monitoring metrics over categories with filter support  

---

## 🛠️ How to Add a Bar Chart

<iframe className="w-full aspect-video" src="https://www.youtube.com/embed/7Y94KEZI2hM?list=PLgErWFh-dyiGp9yUDnnx67wHEeNqzzMXZ" title="How to Use the Bar Chart Widget in OpenLIT – Visualize Trends Over Time" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Example:

```sql
WITH
	parseDateTimeBestEffort('{{filter.timeLimit.start}}') AS start_time,
	parseDateTimeBestEffort('{{filter.timeLimit.end}}') AS end_time,
	
	SELECT
		SpanAttributes['gen_ai.request.model'] AS model,
		CAST(COUNT(SpanAttributes['gen_ai.request.model']) AS INTEGER) AS model_count
	FROM
		otel_traces
	WHERE 
		SpanAttributes['gen_ai.operation.name'] != 'vectordb'
		AND notEmpty(SpanAttributes['gen_ai.request.model'])
		AND Timestamp >= start_time
		AND Timestamp <= end_time
	GROUP BY
		model
	ORDER BY
		model_count DESC
	LIMIT 3
````

---

## ⚙️ Configuration Options

* **Color palette**
* **X/Y label & value paths**

<Tip>
Use dynamic bindings like `{{filter.timeLimit.start}}`, `{{filter.timeLimit.end}}` to make your chart respond to dashboard time filters.
</Tip>

---

## ✅ Best Practices

* Sort bars by descending value for clearer insights
* Limit category count (e.g., top 10) to avoid clutter

---

## 🔗 Related Guides

* [Area Chart Widget →](/latest/features/dashboards/widgets/area-chart-widget)
* [Line Chart Widget →](/latest/features/dashboards/widgets/line-chart-widget)
* [Markdown Widget →](/latest/features/dashboards/widgets/markdown-widget)
* [Pie Chart Widget →](/latest/features/dashboards/widgets/pie-chart-widget)
* [Stat Widget →](/latest/features/dashboards/widgets/stat-widget)
* [Table Widget →](/latest/features/dashboards/widgets/table-widget)

